<template>
	<view class="wrap">
		<view class="nav">
			<u-tabs class="tab" :activeStyle="{
			         color: '#EA504F',
			         fontWeight: 'bold',
			     }" :inactiveStyle="{
			         color: '#000',
			     }" :list="tabLists" @click="handleTab" lineColor="#EA504F"></u-tabs>
		</view>
		<view class="content">
			<view class="lists">
				<view class="item">
					<view class="month">1月</view>
					<view class="detail">
						<view class="detail_item">
							<view class="text">
								<text>退货</text>
								<view class="instr">红墙牌开胃可乐口服液</view>
							</view>
							<view class="date">2025.02.13</view>
						</view>
						<view class="detail_item">
							<view class="text">
								<text>退货</text>
								<view class="instr">红墙牌开胃可乐口服液</view>
							</view>
							<view class="date">2025.02.13</view>
						</view>
						<view class="detail_item">
							<view class="text">
								<text>退货</text>
								<view class="instr">红墙牌开胃可乐口服液</view>
							</view>
							<view class="date">2025.02.13</view>
						</view>
						<view class="detail_item">
							<view class="text">
								<text>退货</text>
								<view class="instr">红墙牌开胃可乐口服液</view>
							</view>
							<view class="date">2025.02.13</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="month">12月</view>
					<view class="detail">
						<view class="detail_item">
							<view class="text">
								<text>退货</text>
								<view class="instr">红墙牌开胃可乐口服液</view>
							</view>
							<view class="date">2025.02.13</view>
						</view>
						<view class="detail_item">
							<view class="text">
								<text>退货</text>
								<view class="instr">红墙牌开胃可乐口服液</view>
							</view>
							<view class="date">2025.02.13</view>
						</view>
						<view class="detail_item">
							<view class="text">
								<text>退货</text>
								<view class="instr">红墙牌开胃可乐口服液</view>
							</view>
							<view class="date">2025.02.13</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="month">1月</view>
					<view class="detail">
						<view class="detail_item">
							<view class="text">
								<text>退货</text>
								<view class="instr">红墙牌开胃可乐口服液</view>
							</view>
							<view class="date">2025.02.13</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				tabLists: [{
						name: '全部',
						id: 1
					},
					{
						name: '购买',
						id: 2
					},
					{
						name: '退货',
						id: 3
					}
				],
			}
		},
		
		onLoad () {
			
		},
		
		methods: {
			handleTab () {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: 100vh;
		height: fit-content;
		box-sizing: border-box;
		
		.content {
			padding: 24rpx;
			box-sizing: border-box;
			
			.lists {
				
				.item {
					
					.month {
						font-size: 28rpx;
						margin-bottom: 12rpx;
					}
					
					.detail {
						
						.detail_item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 24rpx;
							background-color: #F5F5F5;
							margin-bottom: 16rpx;
							border-radius: 16rpx;
							box-sizing: border-box;
							
							.text {
								display: flex;
								align-items: center;
								
								text {
									font-size: 28rpx;
									color: #EDB323;
								}
								
								.instr {
									font-size: 28rpx;
									color: #000;
								}
							}
							
							.date {
								font-size: 24rpx;
								color: #7C7C7C;
							}
						}
					}
				}
			}
		}
	}
	::v-deep .u-tabs__wrapper__nav {
		justify-content: space-around;
	}
	::v-deep .u-tabs__wrapper__nav__line {
		height: 0rpx !important;
	}
</style>